<template>
  <div class="index">
    <nav-bar />
    <header>
      <div>个人主页</div>
    </header>
    <main>
      <div class="nav">
        <div class="nav-title">分类</div>
        <div class="nav-content">
          <el-menu default-active="" :collapse-transition="true">
            <el-submenu
              v-for="(submenus, index) in navList"
              :index="`${index + 1}`"
              :key="submenus.sha"
            >
              <template slot="title">
                <div @click="openNav(submenus, index)">
                  <i class="el-icon-magic-stick"></i>
                  <span slot="title">{{ submenus.name }}</span>
                </div>
              </template>
              <el-menu-item
                v-for="(item, subIndex) in submenus.menus"
                :index="(index + 1 + '-' + (subIndex + 1)).toString()"
                :key="item.sha"
              >
                <template slot="title">
                  <div @click="openMenu(item, index, subIndex)">
                    <i class="el-icon-magic-stick"></i>
                    <span slot="title">{{ item.name }}</span>
                  </div>
                </template>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </div>
      </div>
      <div class="file">
        <div class="nav-title">文件</div>
        <div class="preview-option">
          <div>是否打开图片预览：</div>
          <el-switch v-model="isPreview"></el-switch>
        </div>
        <div
          class="file-content"
          v-if="
            isPreview &&
            fileList[id0] &&
            fileList[id0][id1] &&
            fileList[id0][id1].length > 0
          "
        >
          <pic-block :srcList="fileList[id0][id1]" />
        </div>
        <div
          class="file-content"
          v-if="
            !isPreview &&
            fileList[id0] &&
            fileList[id0][id1] &&
            fileList[id0][id1].length > 0
          "
        >
          <div
            v-for="(item, index) in fileList[id0][id1]"
            :key="item.sha"
            @click="openPic(item, index)"
          >
            <img :src="item['download_url']" :key="index" />
          </div>
        </div>
      </div>
    </main>
    <footer>
      <div>底部信息</div>
    </footer>
  </div>
</template>

<script>
import NavBar from "../components/NavBar.vue";
import PicBlock from "../components/PicBlock.vue";
import { git } from "../config/info"

export default {
  components: { PicBlock, NavBar },
  name: "index",
  data() {
    return {
      data: git,
      navList: [],
      fileList: [],
      srcList: [],
      id0: 0,
      id1: 0,
      isPreview: true,
    };
  },
  methods: {
    getBranch() {
      let data = this.data;
      this.$api.getInfo
        .getAllBranch(data)
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {});
    },
    // 获取文件夹列表
    getFiles(path = "") {
      if (this.navList.length > 0) {
        return;
      }
      const data = {
        ...this.data,
        path,
      };
      this.$api.getInfo.getAllFile(data).then((res) => {
        console.log(res, "//");
        this.navList = res.filter((nav) => {
          // 过滤缩略图文件夹
          return (
            nav.name.indexOf("-th") == -1 && nav.name.indexOf("token.txt") == -1
          );
        });
      });
    },
    // 点击分类一级菜单
    openNav(item, index) {
      console.log(item);
      if (this.navList[index].menus && this.navList[index].menus.length > 0) {
        return;
      }
      const data = {
        ...this.data,
        path: "/" + item.path,
      };
      this.$api.getInfo.getAllFile(data).then((res) => {
        this.navList[index].menus = res;
        this.navList = [...this.navList];
      });
      console.log(this.navList);
    },
    // 点击二级菜单
    openMenu(item, index, subIndex) {
      if (this.fileList[index] && this.fileList[index][subIndex]) {
        this.id0 = index;
        this.id1 = subIndex;
        return;
      }
      let pathArr = item.path.split("/");
      pathArr[0] += "-th";
      let prePath = pathArr.join("/");
      const data = {
        ...this.data,
        path: "/" + prePath,
      };
      this.$api.getInfo.getAllFile(data).then((res) => {
        if (!this.fileList[index]) {
          this.fileList[index] = [];
        }
        if (!this.fileList[index][subIndex]) {
          this.fileList[index][subIndex] = [];
        }
        this.fileList[index][subIndex] =
          this.fileList[index][subIndex].concat(res);
        this.fileList = [...this.fileList];
        this.id0 = index;
        this.id1 = subIndex;
        this.getSrcList(this.fileList[index][subIndex]);
        console.log(this.fileList);
      });
    },
    // 获取预览图片列表
    getSrcList(nowFileList) {
      this.srcList = [];
      nowFileList.forEach((item) => {
        this.srcList.push(item["download_url"]);
      });
      console.log(this.srcList, "?");
    },
    openPic(item, index) {
      if (this.isPreview) {
        return;
      }
      window.open(item["download_url"].replace("-th/", "/"));
      console.log(item, index);
    },
    // 预处理
    init() {
      let userInfo = JSON.parse(localStorage.getItem("userInfo"));
      if (userInfo) {
        this.data["access_token"] = userInfo["access_token"];
        let timeData = userInfo.created_at * 1000;
        if (Number(new Date()) > timeData + 23.5 * 3600 * 1000) {
          this.$message.warning("token即将失效或已过期！");
        }
      } else {
        this.$message.warning("该浏览器未添加token，请先认证！");
      }
      this.getFiles();
    },
  },
  created() {
    this.init();
  },
};
</script>

<style lang="scss" scoped>
.index {
  display: flex;
  flex-direction: column;
  & > * {
    display: flex;
    justify-content: center;
  }
  // header {
  // }
  main {
    flex-direction: column;
    .nav {
      flex: 1;
      display: flex;
      flex-direction: column;
      .nav-title {
        cursor: pointer;
      }
      .nav-content {
        flex: 1;
      }
    }
    .file {
      flex: 1;
      display: flex;
      flex-direction: column;
      .file-content {
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
      }
      .preview-option {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 10px 0;
      }
    }
  }
  footer {
  }
}
</style>